<!doctype html>
<html lang="en" class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="Syntactically Awesome Style Sheets" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sass: {{ title | default: 'Syntactically Awesome Style Sheets' }}</title>

    <link
      rel="alternate"
      type="application/atom+xml"
      href="/feed.xml" />

    <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="/icon.png">
    <link rel="icon" type="image/png" sizes="152x152" href="/icon.png">
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />

    <link
      href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400|Source+Sans+Pro:300,400,600|Source+Serif+Pro"
      media="screen"
      rel="stylesheet" />
    <link
      href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
      media="screen"
      rel="stylesheet" />
    <link
      href="/assets/dist/css/sass.css"
      media="screen"
      rel="stylesheet" />

    <noscript>
      <link
        href="/assets/dist/css/noscript.css"
        media="screen"
        rel="stylesheet" />
    </noscript>

    <!-- Google Analytics (https://developers.google.com/analytics/devguides/collection/gtagjs). -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-535380-14"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'UA-535380-14');
    </script>
  </head>

  {%- assign classes = page.filePathStem | replace: "/", " " | strip -%}

  <body data-layout="body" class="{{ classes }}">
    <!--[if lt IE 9]>
    <p class="browserupgrade">
    You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.
    </p>
    <![endif]-->

    {% typogr -%}
      {%- if is_playground -%}
        {% render 'playground/header', title: title %}
      {%- else -%}
        {% render 'header', alerts: alerts %}
      {%- endif -%}
    {%- endtypogr %}

    <main class="content" id="main-content" itemprop="mainContentOfPage" role="main">
      {% assign is_typedoc = page | isTypedoc %}
      {% unless is_typedoc or is_playground %}
        <h1 class="sl-l-container">
          {%- if h1 -%}
            {{ h1 | typogr }}
          {%- elsif title -%}
            {{ title | typogr }}
          {%- endif -%}
        </h1>
      {% endunless %}

      <div class="sl-l-container sl-color--white-background{% unless is_home %} sl-l-section{% endunless %}{% if is_playground %} sl-l-section--playground{% endif %}">
        {{ content | typogr }}
      </div>

      {% unless is_playground %}
        <div class="sl-c-alert">
          <div class="sl-l-container sl-c-list-horizontal-wrapper" aria-labelledby="release-nav">
            <ul class="sl-l-grid--justify-center">
              <li id="release-nav">Current Releases:</li>
              <li><span class="release-name"><a href="/dart-sass">Dart Sass</a> <a href="{{ releases['dart-sass'].url }}">{{ releases['dart-sass'].version }}</a></span></li>
              <li><span class="release-name"><a href="/libsass">LibSass</a> <a href="{{ releases['libsass'].url }}">{{ releases['libsass'].version }}</a></span></li>
              <li><span class="release-name"><a href="/ruby-sass">Ruby Sass</a> <span aria-label="coffin" role="presentation">⚰</span></span></li>
              <li class="sl-l-grid__column sl-l-large-grid__column--auto-size"><a href="/implementation">Implementation Guide</a></li>
            </ul>
          </div>
        </div>
      {% endunless %}

      {% if section_bottom %}
        <section class="sl-color--white-background sl-l-container">
          <ul class="sl-l-grid sl-l-grid--full sl-l-medium-grid--gutters-large sl-l-medium-grid--divide-by-2 sl-l-large-grid--divide-by-3 sl-l-section">
            {% for item in section_bottom %}
              <li class="sl-l-grid__column">
                <h2>{{ item.header | typogr }}</h2>
                {{ item.body | markdown | typogr }}
              </li>
            {% endfor %}
          </ul>
        </section>
      {% endif %}
    </main>

    {% typogr %}{% render 'footer' %}{% endtypogr %}

    {% unless is_playground %}
      <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
      <script>
        docsearch({
          container: '#docsearch',
          appId: 'Q9MULQONSV',
          indexName: 'sass-lang',
          apiKey: '2ebc7881b79986f58dc2f424769bf3fc',
          transformItems: function(hits) {
            var domain = window.location.origin + "/";
            hits.forEach(function(hit) {
              if (! hit.url.startsWith(domain)) {
                hit.url = hit.url.replace(/^https?:\/\/[^\/]+\//, domain);
              }
            });
            return hits;
          }
        });
      </script>
    {% endunless %}

    <script>
      !function(d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0],
          p = /^http:/.test(d.location)
            ? 'http'
            : 'https';
        if (! d.getElementById(id)) {
          js = d.createElement(s);
          js.id = id;
          js.src = p + '://platform.twitter.com/widgets.js';
          fjs.parentNode.insertBefore(js, fjs);
        }
      }(document, 'script', 'twitter-wjs');
    </script>
    <script src="/assets/dist/js/sass.js"></script>
    <!-- Current page: {{ page.url }} -->
  </body>
</html>
